<template>
  <div class="step-panel">
    <div class="title"> 活体验证</div>
    <StepProgress :steps="['填写身份证', '录制视频', '验证结果']" :current="1" />
    <div class="video-area">
      <div class="face-frame">
        <video ref="video" autoplay playsinline width="180" height="180" class="video"></video>
        <svg class="circle" width="180" height="180">
          <circle cx="90" cy="90" r="85" stroke="#4CAF50" stroke-width="4" fill="none" />
        </svg>
      </div>
      <div class="face-tip">
        请正对摄像头，勾速朗读数字：<span class="num">{{ randomNumber }}</span>
      </div>
    </div>
    <div class="btn-row">
      <button class="rec-btn" @click="startRecord" :disabled="recording">开始录制</button>
      <button class="rec-btn gray" :disabled="!canRetry" @click="retry">重新录制</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import StepProgress from './StepProgress.vue'

const emit = defineEmits(['next'])
const videoBlob = ref(null)
const mediaRecorder = ref(null)
const recording = ref(false)
const canRetry = ref(false)
const randomNumber = ref('')

function generateRandomNumber() {
  randomNumber.value = Math.floor(1000 + Math.random() * 9000).toString()
}

function startRecord() {
  navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
    const video = document.querySelector('video')
    video.srcObject = stream
    mediaRecorder.value = new MediaRecorder(stream)
    let chunks = []
    mediaRecorder.value.ondataavailable = e => chunks.push(e.data)
    mediaRecorder.value.onstop = () => {
      videoBlob.value = new Blob(chunks, { type: 'video/webm' })
      canRetry.value = true
      emit('next', { videoBlob: videoBlob.value })
    }
    mediaRecorder.value.start()
    recording.value = true
    setTimeout(() => {
      mediaRecorder.value.stop()
      recording.value = false
    }, 4000)
  })
}
function retry() {
  canRetry.value = false
  startRecord()
}

onMounted(() => {
  generateRandomNumber()
})
</script>

<style scoped>
.title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #666;
}
.video-area {
  margin: 32px 0 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.face-frame {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 18px;
}
.video {
  border-radius: 50%;
  background: #eee;
}
.circle {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
}
.face-tip {
  background: #f5f5f5;
  color: #888;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.rand-num {
  font-weight: bold;
  color: #333;
  font-size: 18px;
  background: #e0eaf6;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.btn-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 18px;
}
.rec-btn {
  background: #e53935;
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.rec-btn.gray {
  background: #bbb;
  cursor: not-allowed;
}
.rec-btn:not(.gray):hover {
  background: #b71c1c;
}
</style> 